<template>
  <div class="container">
    <el-scrollbar style="height:100%" class="scrollbar-x">
      <el-page-header class="header" content="拜访记录" @back="goBack" />
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="name" label="访客姓名" />
        <el-table-column prop="pic" label="访客照片" />
        <el-table-column prop="mobile" label="访客手机号" />
        <el-table-column prop="sex" label="访客性别" />
        <el-table-column prop="company" label="访客公司" />
        <el-table-column prop="appointTime" label="预约时间" />
        <el-table-column prop="visitTime" label="拜访时间" />
        <el-table-column prop="origin" label="事由" />
        <el-table-column prop="interviewee" label="被访人" />
        <el-table-column prop="phone" label="被访人手机号" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <!-- 分页 -->
      <el-pagination :current-page="query.page" :page-sizes="query.sizes" :page-size="query.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          pic: '',
          mobile: '13800000000',
          sex: '男',
          company: '甲',
          appointTime: '2022-01-01 15:08:00',
          visitTime: '2022-01-01 18:00:03',
          origin: '测试',
          interviewee: '赵四',
          phone: '13700022200',
          remark: '123'
        },
        {
          name: '张三',
          pic: '',
          mobile: '13800000000',
          sex: '男',
          company: '甲',
          appointTime: '2022-01-01 15:08:00',
          visitTime: '2022-01-01 18:00:03',
          origin: '测试',
          interviewee: '赵四',
          phone: '13700022200',
          remark: '123'
        },
        {
          name: '张三',
          pic: '',
          mobile: '13800000000',
          sex: '男',
          company: '甲',
          appointTime: '2022-01-01 15:08:00',
          visitTime: '2022-01-01 18:00:03',
          origin: '测试',
          interviewee: '赵四',
          phone: '13700022200',
          remark: '123'
        },
        {
          name: '张三',
          pic: '',
          mobile: '13800000000',
          sex: '男',
          company: '甲',
          appointTime: '2022-01-01 15:08:00',
          visitTime: '2022-01-01 18:00:03',
          origin: '测试',
          interviewee: '赵四',
          phone: '13700022200',
          remark: '123'
        },
        {
          name: '张三',
          pic: '',
          mobile: '13800000000',
          sex: '男',
          company: '甲',
          appointTime: '2022-01-01 15:08:00',
          visitTime: '2022-01-01 18:00:03',
          origin: '测试',
          interviewee: '赵四',
          phone: '13700022200',
          remark: '123'
        }
      ],
      query: {
        page: 1,
        size: 10,
        sizes: [5, 10, 20]
      },
      total: 4
    }
  },
  methods: {
    // 返回
    goBack() {
      this.$router.back()
    },
    // 改变条数
    handleSizeChange() {

    },
    // 改变页码
    handleCurrentChange() {

    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  height: 100%;
  .header {
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ebeef5;
  }
  .el-pagination {
    margin-left: 40%;
    margin-top: 30px;
  }
}
</style>
